<!--
 /**
 * Author: txj
 * Date: 2023年7月10日11:53:49
 * Desc: QcodeDetailGb 国标二维码
 */
-->
<template>
  <u-overlay :show="show">
    <view class="main">
      <view class="b fc-3 fs30">国标取票码</view>
      <view class="mt20 mb20">{{ dataList[topSwiperIndex].seatDescribe }}</view>
      <view class="qrcode-main">
        <view @click.stop="changeQr('pre')" class="mr80"
          ><u-icon
            name="arrow-left-double"
            :color="showColor('left')"
            size="20"
          ></u-icon
        ></view>
        <swiper
          :indicator-dots="false"
          :current="topSwiperIndex"
          class="qrcode"
          @change="topSwiperTab"
        >
          <swiper-item v-for="(item, index) in qrCodeList" :key="index">
            <zm-image :src="item" width="326rpx" height="326rpx"> </zm-image>
          </swiper-item>
        </swiper>
        <view @click.stop="changeQr('append')" class="ml80"
          ><u-icon
            name="arrow-right-double"
            :color="showColor('right')"
            size="20"
          ></u-icon
        ></view>
      </view>
      <view class="fc-gray mt20" @click="onClose">关闭</view>
    </view>
  </u-overlay>
</template>
<script>
  import ZmImage from '@/commons/ZmImage'
  import { callTelephone } from '@/utils/tools'
  export default {
    name: 'CouponDetail',
    components: { ZmImage },
    props: {
      value: {
        type: Boolean,
        default: false
      },
      orderInfo: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        topSwiperIndex: 0,
        addressShow: false
      }
    },
    created() {
      console.log('created', this.orderInfo)
      //   this.topSwiperIndex = this.dataList.findIndex(
      //     (item) => item.couponId === this.obj.couponId
      //   )
      //   if (this.topSwiperIndex === -1) {
      this.topSwiperIndex = 0
      //   }
    },
    methods: {
      onClose() {
        this.$emit('input', false)
      },
      showAddress() {
        this.addressShow = true
      },
      topSwiperTab(e) {
        this.topSwiperIndex = Number(e.target.current)
      },
      changeQr(type) {
        if (type === 'pre') {
          if (this.topSwiperIndex !== 0) {
            this.topSwiperIndex = this.topSwiperIndex - 1
          }
        } else {
          if (this.topSwiperIndex !== this.dataList.length - 1) {
            this.topSwiperIndex = this.topSwiperIndex + 1
          }
        }
      },
      showColor(type) {
        console.log(
          'this.topSwiperIndex',
          this.topSwiperIndex,
          this.dataList.length
        )
        if (type === 'left') {
          return this.topSwiperIndex === 0 ? '#999999' : 'black'
        } else {
          return this.topSwiperIndex === this.dataList.length - 1
            ? '#999999'
            : 'black'
        }
      },
      call(p) {
        callTelephone(p)
      }
    },
    computed: {
      dataList() {
        return this.orderInfo.ns
      },
      qrCodeList() {
        const arr = []
        this.dataList.forEach((item) => {
          console.log('item.infoCode', item.infoCode)
          arr.push(this.$utils.qrcodeCreate(item.infoCode))
        })
        return arr
      },
      show: {
        get() {
          return this.value
        },
        set(v) {
          this.$emit('input', v)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    display: flex;
    align-items: center;
    padding: 30rpx;
    flex-direction: column;
    margin: 300rpx 50rpx 0 50rpx;
    width: calc(100% - 100rpx);
    box-sizing: border-box;
    // height: 821upx;
    background: #ffffff;
    border-radius: 20rpx;
    .qrcode-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .qrcode {
        width: 340rpx;
        height: 340rpx;
      }
    }
  }
</style>
